<template>
  <page-view>
    <table-head-group :columns="columns" :rowKey='record => record.key' :data='dataT'></table-head-group>
  </page-view>
</template>

<script>
  import PageView from '@/views/layout/PageView.vue';
  import TableHeadGroup from "@/components/TableHeadGroup";

  const path = require('path')
  const files = require.context('@/components', false, /\.vue$/)
  const modules = {}
  files.keys().forEach(key => {
    const name = path.basename(key, '.vue')
    modules[name] = files(key).default || files(key)
  })

  console.log('引入多个组件的便捷写法：', modules)
  export default {
    name: 'Table',
    components: {
      PageView,
      TableHeadGroup
    },
    data() {
      return {
        loading: false,
        columns: [{
          title: '场景名称',
          dataIndex: 'name',
          customRender: (value, row) => {
            return {
              children: value,
              attrs: {
                rowSpan: row.rowSpan,
                style: 'background-color: #fff;border-bottom: 1px solid #e8e8e8;'
              }
            }
          }
        }, {
          title: '场景详情',
          dataIndex: 'nameDetail',
          customRender: (value, row, index) => {
            return this.renderContent(value, row, index, this.dataT)
          },
        }, {
          title: '出场',
          dataIndex: 'count',
          customRender: (value, row, index) => {
            return this.renderContent(value, row, index, this.dataT)
          },
        }],
        dataT: []
      }
    },
    methods: {
      renderContent(value, row, index, data) {
        const obj = {
          children: value,
          attrs: {},
        };
        if (row.rowSpan > 0) {
          obj.attrs.style = 'border-top: 1px solid #e8e8e8;'
        }
        if (index === 0) {
          obj.attrs.style = 'border-top: none'
        }
        if (index === data.length - 1) {
          obj.attrs.style = 'border-bottom: 1px solid #e8e8e8;'
        }
        return obj
      },

    },
    created() {
      const result = [{
        "name": "秦家大院",
        "scenes": [
          {"scene": "秦家大院", "total": "29"},
          {"scene": "秦家大院1", "total": "9"},
          {"scene": "秦家大院2","total": "69"}
        ]
      }, {
        "name": "秦家大院1",
        "scenes": [{"scene": "秦家大院", "total": "29"}, {"scene": "秦家大院1", "total": "9"}, {
          "scene": "秦家大院2",
          "total": "69"
        }]
      }]
      for (let i in result) {
        for (let s in result[i].scenes) {
          this.dataT.push({
            name: result[i].name,
            nameDetail: result[i].scenes[s].scene,
            count: +(result[i].scenes[s].total)
          })
        }
      }
    },

    mounted() {
      console.log('children:', this.$children)
    }
  }
</script>
